<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例——计数器</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	</head>
	<body>
		<div id="app-counter" class="form-group">
		    <div class="input-group">
		    	<div class="input-group-addon" v-on:click="sub">
		    		<span class="glyphicon glyphicon-minus"></span>
		    	</div>
		    		<input type="text" class="form-control" v-model="num">
		    	<div class="input-group-addon" @click="add">
		    		<span class="glyphicon glyphicon-plus"></span>
		    	</div>
		    </div>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var counterAPP = new Vue({
				el:"#app-counter",
				data:{
					num:1,
					maxNum:10,
					minNum:0
				},
				methods:{
					add:function(){
						if(this.num<this.maxNum && this.num>=this.minNum) this.num++;
						else if(this.num<this.minNum) this.num=this.minNum;
						else {
							this.num=this.maxNum;
							alert("这已经是最大数量了！");
						}
					},
					sub:function(){
						if(this.num>this.minNum && this.num<=this.maxNum) this.num--;
						else if(this.num>=this.maxNum) this.num=this.maxNum;
						else {
							this.num=this.minNum;
							alert("已经到底啦！什么都没有了！");
						}
					}
				}
			});
		</script>
	</body>
</html>
